/** 
 * 1.发送请求获取数据
 * 2.点击轮播图 预览大图
 *  1.给轮播图绑定点击事件
 *  2.调用小程序的api previewImage
 * 3.点击加入购物车
 *  1.先绑定点击事件
 *  2.获取缓存中的购物车数据  数组格式
 *  3.先判断 当前的商品是否已经存在于购物车
 *  4.已经存在 修改商品数据 执行购物车数量++ 重新把购物车数组填充回缓存中
 *  5.不存在于购物车的数组中 直接给购物车数组添加一个新元素 带上购买数量属性num 重新把购物车数组 填充回缓存中
 *  6.弹出提示
 * 4.商品收藏
 *  1.页面onShow的时候  加载缓存中的商品收藏的数据
 *  2.判断当前商品是不是被收藏
 *    1.是   改变页面图标
 *    2.不是  执行收藏操作
 *  3.点击商品收藏按钮
 *    1.判断该商品是否存在缓存数组中
 *    2.已经存在  把该商品删除
 *    3.不存在 把商品添加到收藏数组中 存入到缓存中即可
*/
import { request } from '../../request/index.js'
import regeneratorRuntime from '../../lib/runtime/runtime' // 支持es7的js文件引入1123
Page({

  /**
   * 页面的初始数据
   */
  data: {
    goodsObj: {},
    isCollect: false
  },

  // 商品对象  放大的商品预览图
  goodsPreImgObj: {},

  /**
   * 生命周期函数--监听页面加载
   */
  // onLoad: function (options) {
  //   const { goods_id } = options
  //   // console.log(options,goods_id)
  //   this.data.goods_id = goods_id
  //   this.getGoodsDetail(goods_id)
  // },

  onShow: function () {
    let pages = getCurrentPages()
    // console.log(pages)
    let currentPage = pages[pages.length-1]
    // console.log(currentPage)
    let options = currentPage.options
    const { goods_id } = options
    this.data.goods_id = goods_id
    this.getGoodsDetail(goods_id)
  },

  /**
   * 获取商品详情数据
   */
  async getGoodsDetail(goods_id) {
    // const res = await request({ url: '/goods/detail?goods_id=' + goods_id }) // 可以这么写
    const res = await request({ url: '/goods/detail', data: { goods_id } })

    this.goodsPreImgObj = res
    // 优化前
    // this.setData({
    //   goodsObj: res
    // })

    console.log(res)

    // 1.获取缓存中的商品收藏的数组
    let collect = wx.getStorageSync('collect') || []
    // 2.判断商品是否被收藏了
    let isCollect = collect.some(item => item.goods_id === this.goodsPreImgObj.goods_id)
    //优化后
    this.setData({
      goodsObj: {
        goods_price:res.goods_price,
        goods_name: res.goods_name,
        pics:res.pics,
        // iphone部分手机不识别webp图片格式
        // 最好找到后台让他修改
        // 临时自己改 确保后台存在1.webp => 1.jpg
        goods_introduce:res.goods_introduce.replace(/\.webp/g,'.jpg')
      },
      isCollect
    })
  },

  // 图片预览放大e
  handleImagePreview(e) {
      console.log(e)
      const imUrl = this.goodsPreImgObj.pics.map(item => item.pics_mid)
      console.log(imUrl)
      const currentImg = e.currentTarget.dataset.url
      wx.previewImage({
        current: currentImg, // 当前显示图片的http链接
        urls: imUrl // 需要预览的图片http链接列表
      })
  },

  // 点击加入购物车
  handleCartAdd() {
    // 1. 获取缓存中的购物车  如果没有缓存则给个空数组  getStorageSync 同步执行代码
    let cart = wx.getStorageSync('cart111') || []
    // 2.判断商品对象是否存在于购物车数组中
    let index = cart.findIndex(item => item.goods_id === this.goodsPreImgObj.goods_id)
    if(index === -1) {
      // 3.不存在 第一次添加
      this.goodsPreImgObj.num = 1
      this.goodsPreImgObj.checked = true // 购物车checkBox为选中状态
      cart.push(this.goodsPreImgObj)
    } else {
      // 4.已经存在购物车数据 执行num++
      cart[index].num++
    }
      // 5.把购物车重新添加回缓存中
      wx.setStorageSync('cart111', cart)

      // 6.弹窗提示
      wx.showToast({
        title: '加入成功',
        icon: 'success',
        // duration: 2000,
        // true 防止用户手抖  疯狂点击按钮
        mask: true
      })
  },
  // 点击  商品收藏图标
  handleCollect() {
    let isCollect = false
    // 1.获取缓存中的商品收藏数组
    let collect = wx.getStorageSync('collect') || []
    // 2.判断该商品是否被收藏过
    let index = collect.findIndex(item => item.goods_id === this.goodsPreImgObj.goods_id)
    // 3.当index != -1时  收藏过
    if(index !== -1) {
      // 能找到  已经收藏过了  在数组中删除该商品
      collect.splice(index,1)
      isCollect = false
      wx.showToast({
        title: '取消成功',
        icon: 'success',
        mask: true
      })
    } else {
      // 没有收藏过
      collect.push(this.goodsPreImgObj)
      isCollect = true
      wx.showToast({
        title: '收藏成功',
        icon: 'success',
        mask: true
      })
    }
    // 4.把数组存入到缓存中
    wx.setStorageSync('collect', collect)
    // 5.刷新data中的属性
    this.setData({
      isCollect
    })
  }
})